<!--  -->
<template>
  <div class="aa">
    <div class="login">
      <div class="login-left"><img src="../assets/img1.png" alt="" /></div>
      <div class="login-right">
        <h2>智慧云SaaS餐饮服务平台</h2>
        <p>专 注 餐 饮 SAAS，做 科 技 餐 厅 系 统</p>
        <div class="login-right-form">
          <el-form :model="formData" :rules="rules" ref="from">
            <el-form-item prop="username">
              <el-input
                v-model="formData.username"
                placeholder="请输入用户名"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="formData.password"
                placeholder="请输入密码"
                show-password
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                class="login-form-button"
                @click="handleSubmit('from')"
                >登录</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      formData: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          {
            required: true,
            message: "用户名在6到12个字之间",
            max: 12,
            min: 6,
          },
        ],
        password: [
          {
            required: true,
            message: "请输入正确的密码",
          },
        ],
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleSubmit: function (form) {
      this.$refs[form].validate((valid, obj) => {
        console.log(valid, obj);
        if (valid) {
          let username = this.formData.username;
          let password = this.formData.password;
          this.$http
            .post("http://linweiqin.cn:8001/admin/login", {
              user_name: username,
              password: password,
            })
            .then((res) => {
              console.log(res.data);
              if (res.data.status === 1) {
                alert(res.data.success);
                window.localStorage.setItem("status", 1);
                this.$router.push("navList");
              }
            });
        } else {
          alert("注册或登录失败");
        }
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.aa {
  padding-top: 100px;
  .login {
    width: 1000px;
    height: 500px;
    display: flex;
    padding: 50px;
    margin: 0 auto;
    border: 1px solid black;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 10px 50px;

    .login-left {
      img {
        width: 400px;
        height: 370px;
      }
    }

    .login-right {
      width: 450px;
      height: 400px;
      margin: 50px;
      h2 {
        font-size: 35px;
        text-indent: 5px;
        margin-bottom: 10px;
      }

      p {
        text-indent: 5px;
      }
      .login-right-form {
        margin-top: 50px;
        .login-form-button {
          width: 100%;
        }
      }
    }
  }
}
</style>